<template>
	<view class="container">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<!-- <view class="parkActivitiesList" v-for="(item, index) in dataList" :key="index" @click="details(item)">
				<image :src="item.img" mode=""></image>
				<view class="backView">
					<view class="name">
						{{ item.title }}
					</view>
					<view class="concise">
						{{ item.create_datetime }}
					</view>
				</view>
				<view class="state" :class="{
					state1: item.state == 1,
					state2: item.state == 2,
					state3: item.state == 3
				}"></view>
			</view> -->
			<!-- <view class="content">
				<view class="items" v-for="(item, index) in dataList" :key="index" @click="details(item)">
					<view class="title">
						{{ item.title }}
					</view>
					<view class="nameTime">
						<view class="time">
							{{ formatTime(item.publish_date) }}
						</view>
					</view>
				</view>
			</view> -->
			<view class="parkActivitiesList-content">
				<view class="parkActivitiesList" v-for="(item, index) in dataList" :key="index" @click="details(item)">
					<image v-if="item.cover" :src="item.cover" mode=""></image>
					<image v-else src="../../static/images/20170510104938756.png" mode="aspectFill"></image>
					<view class="backView">
						<view class="name">
							{{ formatDate(item.publish_date) }}活动
						</view>
						<view class="concise">
							<span>
								{{ formatTime(item.publish_date) }}
							</span>
							<span> | </span>
							<span> {{ item.title }}</span>
						</view>
					</view>
					<view class="state" :class="activityStatus(item)"></view>
				</view>
			</view>
		</z-paging>

	</view>
</template>

<script>
import dayjs from 'dayjs';
import { getCategoryList } from '@/api/api.js'
export default {
	data() {
		return {
			dataList: [{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '园区当月活动',
				state: 1,
				concise: 'qwertyuiosxcvbnsdhjgsdfhjsdfjsdfjsdfsdfsdfsdfsdsdjkfhsdjkfhsdjkhfsjdhfsdfhsdhj'
			},
			{
				img: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '园区当月活动',
				state: 2,
				concise: '2222222222'
			}
			]
		};
	},
	methods: {
		details(item) {
			uni.setStorageSync('currentData', { item: item, isTitle: false })
			uni.navigateTo({
				url: '/pages/parkActivities/eventDetails'
			})
		},
		async queryList(pageNo, pageSize) {
			const data = {
				category_name: '园区活动',
				page: pageNo,
				limit: pageSize
			}
			const res = await getCategoryList(data);
			if (res.code == 2000) {
				this.$refs.paging.complete(res.data.data)
			}
		},
		formatTime(time) {
			return dayjs(time).format('YYYY年MM月DD日');
		},
		formatDate(date) {
			const inputDate = dayjs(date); // 输入日期
			const currentDate = dayjs();  // 当前日期

			if (inputDate.isSame(currentDate, 'month')) {
				return '当月';
			} else if (inputDate.isSame(currentDate.subtract(1, 'month'), 'month')) {
				return '上月';
			} else if (inputDate.isBefore(currentDate.startOf('month'))) {
				return '历史';
			} else if (inputDate.isSame(currentDate.add(1, 'month'), 'month')) {
				return '下月';
			} else {
				return '未来';
			}
		},
		activityStatus(row) {
			const now = dayjs(); // 获取当前时间
			const startTime = dayjs(row.activity_start_time);
			const endTime = dayjs(row.activity_end_time);

			if (!row.activity_start_time || !row.activity_end_time) {
				return "state3";
			} else if (now.isBefore(startTime)) {
				return 'state1';
			} else if (now.isAfter(endTime)) {
				return 'state3';
			} else {
				return 'state2';
			}
		},
	}
}
</script>

<style lang="scss">
.container {
	padding: 25rpx 25rpx 0 25rpx;

	// .parkActivitiesList {
	// 	margin-bottom: 10rpx;
	// 	position: relative;
	// 	height: 300rpx;
	// 	overflow: hidden;
	// 	border-radius: 10rpx;

	// 	image {
	// 		width: 100%;
	// 		height: 300rpx;
	// 	}

	// 	.backView {
	// 		position: absolute;
	// 		bottom: 0;
	// 		background-color: rgba(0, 0, 0, 0.3);
	// 		color: #f6f2f1;
	// 		width: 100%;

	// 		.name {
	// 			padding: 20rpx 30rpx;
	// 			font-weight: bold;
	// 			font-size: 23rpx;
	// 		}

	// 		.concise {
	// 			font-weight: bold;
	// 			font-size: 20rpx;
	// 			padding: 0rpx 30rpx 20rpx 30rpx;
	// 			white-space: nowrap;
	// 			overflow: hidden;
	// 			text-overflow: ellipsis;
	// 		}
	// 	}

	// 	.state {
	// 		width: 150rpx;
	// 		height: 150rpx;
	// 		position: absolute;
	// 		right: -5rpx;
	// 		top: -5rpx;
	// 	}

	// 	.state1 {
	// 		background-image: url('../../static/home/notStartedYet.svg');
	// 		background-size: 100% 100%;
	// 		background-repeat: no-repeat;
	// 	}

	// 	.state2 {
	// 		background-image: url('../../static/home/haveInHand.svg');
	// 		background-size: 100% 100%;
	// 		background-repeat: no-repeat;
	// 	}

	// 	.state3 {
	// 		background-image: url('../../static/home/ended.svg');
	// 		background-size: 100% 100%;
	// 		background-repeat: no-repeat;
	// 	}
	// }

	// .parkActivitiesList:last-child {
	// 	margin-bottom: 0;
	// }
	.parkActivitiesList-content {
		padding: 20rpx 30rpx;
	}
	.parkActivitiesList {
		margin-bottom: 10rpx;
		position: relative;
		height: 300rpx;
		overflow: hidden;
		border-radius: 15rpx;

		image {
			width: 100%;
			height: 100%;
		}

		.backView {
			position: absolute;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			color: #f6f2f1;
			width: 100%;
		}

		.name {
			padding: 20rpx 30rpx;
			font-weight: bold;
			font-size: 23rpx;
			// 溢出隐藏点点点
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.concise {
			font-weight: bold;
			font-size: 20rpx;
			padding: 0rpx 30rpx 20rpx 30rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.parkActivitiesList:last-child {
			margin-bottom: 0;
		}

		.state {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			right: -5rpx;
			top: -5rpx;
		}

		.state1 {
			background-image: url('../../static/home/notStartedYet.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.state2 {
			background-image: url('../../static/home/haveInHand.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.state3 {
			background-image: url('../../static/home/ended.svg');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
}

// .container {
// 	background-color: #f5f5f5;
// 	height: 100vh;

// 	.search {
// 		padding: 18rpx 25rpx;
// 		background-color: #fefefe;
// 	}

// 	.content {
// 		background-color: #f5f5f5;


// 		.items {
// 			margin: 20rpx 25rpx 0 25rpx;
// 			background-color: #ffffff;
// 			border-radius: 10rpx;
// 			padding: 30rpx;

// 			.title {
// 				white-space: nowrap;
// 				overflow: hidden;
// 				text-overflow: ellipsis;
// 				font-weight: bold;
// 				font-size: 32rpx;
// 				margin-bottom: 20rpx;
// 			}

// 			.nameTime {
// 				font-size: 25rpx;
// 				color: #9ea8cc;
// 				display: flex;

// 				.name {
// 					flex: 1;
// 					text-align: left;
// 				}

// 				.time {
// 					text-align: right;
// 				}
// 			}
// 		}
// 	}

// }
</style>